<template>
  <div class="workspace">
    <!-- 左侧导航栏 -->
    <div class="workspace-sidebar">
      <!-- Logo区域 -->
      <div class="logo-area">
        <div class="logo-section">
          <div class="logo-container">
          <img src="../assets/img/logo.png" alt="金圣达" class="logo">
          </div>
          <span class="platform-name">金圣达AI设计平台</span>
        </div>
        <el-button type="primary" class="upgrade-btn" size="small" @click="showUpgradeDialog">
          升级
        </el-button>
      </div>

      <!-- 会员升级弹窗 -->
      <el-dialog
        :visible.sync="upgradeDialogVisible"
        width="880px"
        :show-close="false"
        class="upgrade-dialog"
        :close-on-click-modal="true"
        :close-on-press-escape="true"
      >
          <div class="upgrade-header">
          <div class="header-left">
            <div class="logo-container">
              <img src="../assets/img/logo.png" alt="Logo" class="logo">
            </div>
            <span class="header-text">金圣达AI设计平台 · 会员升级</span>
          </div>
          <div class="countdown">
            <i class="el-icon-time"></i>
            <span>{{countdown.hours}}小时{{countdown.minutes}}分钟{{countdown.seconds}}秒后优惠结束</span>
          </div>
        </div>
        <i class="el-icon-close upgrade-close-icon" @click="handleCloseUpgrade"></i>
        
        <div class="upgrade-content">
          <div class="content-header">
            <div class="title">选择会员套餐</div>
            <div class="countdown">剩余<span class="time-highlight">{{ countdown.hours }}小时{{ countdown.minutes }}分钟</span>优惠结束</div>
          </div>
          
          <div class="plan-list">
            <div
              v-for="(plan, index) in membershipPlans"
              :key="index"
              class="plan-item"
              :class="{ active: selectedPlan === index, popular: plan.popular, recommended: plan.recommended }"
              @click="selectedPlan = index"
            >
              <div class="popular-tag" v-if="plan.popular">最受欢迎</div>
              <div class="recommended-tag" v-if="plan.recommended">强烈推荐</div>
              <div class="plan-name">{{ plan.name }}</div>
              <div class="plan-price">
                <span class="currency">¥</span><span class="amount">{{ plan.price }}</span>
              </div>
              <div class="original-price">¥{{ plan.originalPrice }}</div>
              <div class="discount-badge" v-if="plan.discount">{{ plan.discount }}</div>
              <div class="plan-feature" v-if="plan.dailyPrice">
                <span class="feature-value">¥{{ plan.dailyPrice }}</span>/天
              </div>
              <div class="plan-feature" v-else>
                <span class="feature-value">终身有效</span>
            </div>
          </div>
          </div>
          
          <div class="daily-price-notice">
            选择{{ membershipPlans[selectedPlan].name }}套餐，{{ membershipPlans[selectedPlan].dailyPrice ? `每天只需 ¥${membershipPlans[selectedPlan].dailyPrice}` : '一次付费，终身享用' }}，{{ membershipPlans[selectedPlan].discount && `超值${membershipPlans[selectedPlan].discount}特惠` }}
          </div>
          
          <div class="payment-notice">
            支付表示您已阅读并同意《<router-link to="/terms" class="terms-link">服务条款</router-link>》
          </div>
          
          <div class="payment-section">
            <div class="qrcode-section">
              <div class="qrcode-wrapper">
                <img :src="qrcodePlaceholderUrl" alt="支付二维码" class="qrcode-image">
                <div class="qrcode-expired" v-if="qrcodeExpired">
                  <i class="el-icon-refresh" style="font-size: 22px;"></i>
                  <span>二维码已过期</span>
                  <el-button size="small" type="primary">刷新二维码</el-button>
              </div>
              </div>
              
              <div class="price-section">
                <div class="price">¥{{ membershipPlans[selectedPlan].price }}</div>
                <div class="discount-tag">
                  <i class="el-icon-price-tag"></i>
                  已优惠 ¥{{ currentDiscount }}
                </div>
              </div>
              
              <div class="payment-countdown">
                <i class="el-icon-time"></i>
                <span>支付倒计时：{{ paymentCountdown }}</span>
              </div>
              
              <div class="payment-methods">
                <div class="payment-method-title">支付方式</div>
                <div class="payment-method-list">
                  <div class="method-item active">
                    <i class="el-icon-s-finance"></i>
                    <span>微信支付</span>
                    <i class="el-icon-check check-icon"></i>
              </div>
                  <div class="method-item">
                    <i class="el-icon-s-finance"></i>
                    <span>支付宝</span>
            </div>
                </div>
              </div>
              
              <div class="terms-agreement">
                请使用微信扫码支付，支付成功后系统将自动为您开通会员服务
              </div>
            </div>
            
              <div class="recent-payments">
              <div class="recent-header">
                <i class="el-icon-shopping-cart-full"></i>
                <span>用户购买记录</span>
                <span class="payment-count">(今日已有{{ paymentStats.todayCount }}人购买)</span>
              </div>
              
              <div class="payment-items-wrapper">
                <div class="payment-item" v-for="(payment, index) in recentPayments" :key="index">
                  <img :src="payment.avatar" class="user-avatar" :alt="payment.user">
                  <div class="payment-info">
                    <div class="payment-user">{{ payment.user }}</div>
                    <div class="payment-text">{{ payment.text }}</div>
                </div>
                  <div class="payment-plan-tag" :class="{'plan-lifetime': payment.planType === '终身会员'}">
                    {{ payment.planType }}
              </div>
                  <div class="payment-time">{{ payment.time }}</div>
            </div>
          </div>
              
              <div class="payment-stats">
                <div class="stat-item">
                  <div class="stat-value">{{ paymentStats.todayCount }}</div>
                  <div class="stat-label">今日购买</div>
            </div>
                <div class="stat-item">
                  <div class="stat-value">{{ paymentStats.monthlyCount }}</div>
                  <div class="stat-label">本月总购买</div>
            </div>
            </div>

              <div class="hot-plan-tip">
                <i class="el-icon-s-flag"></i>
                <span>{{ membershipPlans[1].popular ? '1年会员' : '终身会员' }}是当前最热门的选择</span>
              </div>
            </div>
          </div>
          
          <div class="member-benefits">
            <div class="benefit-item">
              <i class="el-icon-upload"></i>
              <span>无限文件上传</span>
            </div>
            <div class="info-icon">•</div>
            <div class="benefit-item">
              <i class="el-icon-cpu"></i>
              <span>AI生成无限制</span>
            </div>
            <div class="info-icon">•</div>
            <div class="benefit-item">
              <i class="el-icon-monitor"></i>
              <span>多端同步</span>
            </div>
            <div class="info-icon">•</div>
            <div class="benefit-item">
              <i class="el-icon-data-analysis"></i>
              <span>数据分析工具</span>
            </div>
            <div class="more-benefits" @click="$router.push('/help')">了解更多会员权益</div>
          </div>
        </div>
      </el-dialog>

      <div class="nav-list">
        <!-- 个人工作台区域 -->
        <div class="nav-section">
          <div class="nav-title">个人工作台</div>
          <div class="nav-item" :class="{ active: activeNav === 'myFiles' }" @click="switchNav('myFiles')">
            <i class="el-icon-folder"></i>
            <span>我的文件</span>
            <span class="capacity-info" v-if="showCapacity">{{ files.length }}/{{ maxFiles }}</span>
          </div>
          <div class="nav-item" :class="{ active: activeNav === 'favorites' }" @click="switchNav('favorites')">
            <i class="el-icon-star-off"></i>
            <span>收藏夹</span>
          </div>
        </div>
        <!-- 回收站 -->
        <div class="nav-item" :class="{ active: activeNav === 'trash' }" @click="switchNav('trash')">
          <i class="el-icon-delete"></i>
          <span>回收站</span>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="workspace-content">
      <!-- 顶部操作栏 -->
      <div class="operation-bar">
        <div class="left-actions">
          <div class="file-actions">
            <el-button type="primary" @click="showCreateDialog">
              <i class="el-icon-plus"></i> 新建
            </el-button>
            <el-button @click="showUploadDialog">
              <i class="el-icon-upload"></i> 上传
            </el-button>
          </div>
          
          <div class="search-bar">
            <el-input 
              placeholder="搜索文件/文件夹" 
              prefix-icon="el-icon-search"
              v-model="searchKeyword"
              clearable
              size="medium"
            >
            </el-input>
          </div>
          
          <div class="view-actions">
            <el-button-group>
              <el-button 
                :type="viewMode === 'grid' ? 'primary' : 'default'"
                size="small"
                @click="viewMode = 'grid'"
              >
              <i class="el-icon-menu"></i>
              </el-button>
              <el-button 
                :type="viewMode === 'list' ? 'primary' : 'default'"
                size="small"
                @click="viewMode = 'list'"
              >
                <i class="el-icon-tickets"></i>
              </el-button>
            </el-button-group>
        </div>
          
          <div class="sort-actions">
            <el-dropdown @command="handleSort" trigger="click">
              <el-button size="small">
                {{ sortBy === 'updateTime' ? '按修改时间' : '按名称' }}
                <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="updateTime">按修改时间</el-dropdown-item>
                <el-dropdown-item command="name">按名称</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        
        <div class="user-actions">
          <div class="action-btn ai-promo" @click="showUpgradeDialog">
            <span class="ai-text">金圣达AI设计，会员低至<span class="discount">6折</span></span>
          </div>
          <div class="action-btn gift-btn" @click="showGiftDialog">
            <i class="el-icon-present"></i>
          </div>
          <div class="action-btn download-btn" @click="showDownloadDialog">
            <i class="el-icon-download"></i>
          </div>
          <div class="action-btn notification-btn" @click="showNotifications">
            <i class="el-icon-bell"></i>
            <span class="badge">2</span>
            <div class="notification-dropdown" v-if="showNotificationMenu">
              <div class="notification-header">
                <span>消息通知</span>
                <span class="read-all" @click.stop="markAllAsRead">全部标为已读</span>
              </div>
              <div class="notification-list">
                <div class="notification-item" v-for="(notification, index) in notifications" :key="index">
                  <div class="notification-icon">
                    <i :class="notification.icon"></i>
                  </div>
                  <div class="notification-content">
                    <div class="notification-title">{{ notification.title }}</div>
                    <div class="notification-desc">{{ notification.desc }}</div>
                    <div class="notification-time">{{ notification.time }}</div>
                  </div>
                </div>
              </div>
              <div class="notification-footer">
                <span @click.stop="$router.push('/notifications')">查看全部</span>
              </div>
            </div>
          </div>
          <div class="user-avatar" @click="toggleUserMenu">
            <img :src="userAvatar" alt="用户头像">
            <div class="user-menu" v-if="showUserMenu">
              <div class="menu-item" @click="$router.push('/profile')">个人中心</div>
              <div class="menu-item" @click="$router.push('/profile')">账号设置</div>
              <div class="menu-item" @click="$router.push('/help')">帮助中心</div>
              <div class="menu-item logout" @click="handleLogout">退出登录</div>
            </div>
          </div>
          <div class="action-btn menu-btn" @click="toggleMoreMenu">
            <i class="el-icon-more"></i>
            <div class="more-menu" v-if="showMoreMenu">
              <div class="menu-item" @click="$router.push('/terms')">
                <i class="el-icon-document"></i>
                <span>服务条款</span>
              </div>
              <div class="menu-item" @click="$router.push('/help')">
                <i class="el-icon-question"></i>
                <span>帮助中心</span>
              </div>
              <div class="menu-item" @click="$router.push('/feedback')">
                <i class="el-icon-chat-dot-round"></i>
                <span>意见反馈</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 批量操作工具栏 -->
      <div class="batch-actions" v-if="selectedFiles.length > 0">
        <div class="selected-count">已选择 {{selectedFiles.length}} 个文件</div>
        <div class="action-buttons">
          <el-button size="small" @click="handleBatchFavorite">
            <i class="el-icon-star-off"></i> 收藏
          </el-button>
          <el-button size="small" @click="handleBatchShare">
            <i class="el-icon-share"></i> 分享
          </el-button>
          <el-button size="small" type="danger" @click="handleBatchDelete">
            <i class="el-icon-delete"></i> 删除
          </el-button>
          <el-button size="small" @click="clearSelection">
            <i class="el-icon-close"></i> 取消选择
          </el-button>
        </div>
      </div>

      <!-- 文件列表区域 -->
      <div class="file-list" :class="viewMode">
        <!-- 网格视图 -->
        <template v-if="viewMode === 'grid'">
          <template v-if="filteredFiles.length > 0">
            <div 
              v-for="file in filteredFiles" 
              :key="file.id" 
              class="file-card"
              :class="{ 'is-selected': selectedFiles.includes(file.id) }"
            >
              <div class="file-cover" @click="previewFileMethod(file)">
              <img v-if="file.cover" :src="file.cover" alt="预览图">
                <div v-else class="file-type-icon">
                  <i :class="getFileIcon(file)"></i>
                  <div class="file-type-label">{{ getFileType(file) }}</div>
            </div>
                
                <div class="file-actions">
                  <el-button 
                    circle 
                    size="mini"
                    :type="file.isFavorite ? 'warning' : 'default'"
                    @click.stop="handleFileFavorite(file)"
                  >
                    <i :class="file.isFavorite ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
                  </el-button>
                  <el-button 
                    circle 
                    size="mini"
                    type="danger"
                    @click.stop="handleFileDelete(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </el-button>
                </div>
              </div>
              
            <div class="file-info">
              <div class="file-name" :title="file.name">{{ file.name }}</div>
                <div class="file-meta">
                  <span class="update-time">{{ file.updateTime }}</span>
                </div>
              <div class="file-tags">
                <el-tag size="mini" v-if="file.isRecent">最近修改</el-tag>
                <el-tag size="mini" type="warning" v-if="file.isCollaborating">协作中</el-tag>
                <el-tag size="mini" type="info" v-if="file.isLocked">已锁定</el-tag>
              </div>
                <div class="file-operations">
                  <el-button type="text" size="mini" @click="previewFileMethod(file)">
                    <i class="el-icon-view"></i> 预览
                  </el-button>
                  <el-button type="text" size="mini" @click="$router.push('/edit')">
                    <i class="el-icon-edit"></i> 编辑
                  </el-button>
                  <el-dropdown trigger="click" @command="handleExport">
                    <el-button type="text" size="mini">
                      <i class="el-icon-download"></i> 导出
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="{type: 'doc', file: file}">
                        <i class="el-icon-document"></i> 导出需求文档
                      </el-dropdown-item>
                      <el-dropdown-item :command="{type: 'ppt', file: file}">
                        <i class="el-icon-picture"></i> 导出PPT
                      </el-dropdown-item>
                      <el-dropdown-item :command="{type: 'pdf', file: file}">
                        <i class="el-icon-document"></i> 导出PDF
                      </el-dropdown-item>
                      <el-dropdown-item :command="{type: 'png', file: file}">
                        <i class="el-icon-picture-outline"></i> 导出图片
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
              <div class="export-badge">
                <el-tooltip content="一键导出" placement="top">
                  <i class="el-icon-download"></i>
                </el-tooltip>
            </div>
            </div>
          </template>
          <div v-else class="empty-file-list">
            <i class="el-icon-document"></i>
            <p>暂无文件</p>
            <el-button type="primary" @click="showCreateDialog">立即创建</el-button>
          </div>
        </template>

        <!-- 列表视图 -->
        <template v-else>
          <el-table 
            :data="filteredFiles" 
            style="width: 100%"
            @selection-change="handleSelectionChange"
            ref="fileTable"
            v-if="filteredFiles.length > 0"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="name" label="文件名" min-width="200">
              <template slot-scope="scope">
                <div class="file-name-cell">
                  <i :class="getFileIcon(scope.row)" class="file-icon"></i>
                  <span>{{ scope.row.name }}</span>
                  <el-tag 
                    size="mini" 
                    type="warning" 
                    v-if="scope.row.isCollaborating"
                  >协作中</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="修改时间" width="180"></el-table-column>
            <el-table-column label="操作" width="280" fixed="right">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="previewFileMethod(scope.row)">
                  <i class="el-icon-view"></i> 预览
                </el-button>
                <el-button size="mini" type="text" @click="$router.push('/edit')">
                  <i class="el-icon-edit"></i> 编辑
                </el-button>
                <el-dropdown size="mini" trigger="click" @command="handleExport">
                  <el-button size="mini" type="text">
                    <i class="el-icon-download"></i> 导出
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="{type: 'doc', file: scope.row}">
                      <i class="el-icon-document"></i> 导出需求文档
                    </el-dropdown-item>
                    <el-dropdown-item :command="{type: 'ppt', file: scope.row}">
                      <i class="el-icon-picture"></i> 导出PPT
                    </el-dropdown-item>
                    <el-dropdown-item :command="{type: 'pdf', file: scope.row}">
                      <i class="el-icon-document"></i> 导出PDF
                    </el-dropdown-item>
                    <el-dropdown-item :command="{type: 'png', file: scope.row}">
                      <i class="el-icon-picture-outline"></i> 导出图片
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-button 
                  size="mini"
                  type="text"
                  :class="{'text-warning': scope.row.isFavorite}"
                  @click="handleFileFavorite(scope.row)"
                >
                  <i :class="scope.row.isFavorite ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
                </el-button>
                <el-button 
                  size="mini"
                  type="text"
                  class="text-danger"
                  @click="handleFileDelete(scope.row)"
                >
                  <i class="el-icon-delete"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div v-else class="empty-file-list">
            <i class="el-icon-document"></i>
            <p>暂无文件</p>
            <el-button type="primary" @click="showCreateDialog">立即创建</el-button>
          </div>
        </template>
        
        <!-- 版权信息 -->
        <div class="copyright-footer">
          <div class="copyright-text">
            © {{ new Date().getFullYear() }} 金圣达AI设计平台 版权所有
          </div>
        </div>
      </div>

      <!-- 回收站内容 -->
      <div v-if="activeNav === 'trash'" class="trash-content">
        <div class="trash-header">
          <h3>回收站</h3>
          <el-button 
            type="danger" 
            size="small"
            :disabled="!trashFiles.length"
            @click="handleEmptyTrash"
          >
            清空回收站
          </el-button>
        </div>
        
        <el-table :data="trashFiles" style="width: 100%">
          <el-table-column prop="name" label="文件名称" min-width="200">
            <template slot-scope="scope">
              <div class="file-name-cell">
                <i class="el-icon-document"></i>
                <span>{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="deleteTime" label="删除时间" width="120"></el-table-column>
          <el-table-column prop="originalUpdateTime" label="最后修改时间" width="180"></el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template slot-scope="scope">
              <el-button-group>
                <el-button 
                  size="mini"
                  type="primary"
                  @click="handleRestore(scope.row)"
                >恢复</el-button>
                <el-button 
                  size="mini"
                  type="danger"
                  @click="handlePermanentDelete(scope.row)"
                >删除</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 新建文件对话框 -->
      <el-dialog
        title="新建文件"
        :visible.sync="createDialogVisible"
        width="500px"
        :close-on-click-modal="true"
        :close-on-press-escape="true"
      >
        <div class="create-dialog-content">
          <div class="template-list">
            <div
              v-for="(template, index) in fileTemplates"
              :key="index"
              class="template-item"
              :class="{active: selectedTemplate === index}"
              @click="selectedTemplate = index"
            >
              <div class="template-icon">
                <i :class="template.icon"></i>
              </div>
              <div class="template-info">
                <div class="template-name">{{ template.name }}</div>
                <div class="template-desc">{{ template.description }}</div>
              </div>
            </div>
          </div>
          
          <div class="file-info-form">
            <el-form :model="newFileForm" label-position="top">
              <el-form-item label="文件名称">
                <el-input 
                  v-model="newFileForm.name" 
                  placeholder="请输入文件名称"
                  :suffix="fileTemplates[selectedTemplate].extension"
                ></el-input>
              </el-form-item>
              <el-form-item label="描述(选填)">
                <el-input 
                  v-model="newFileForm.description" 
                  type="textarea"
                  placeholder="请输入文件描述"
                  :rows="3"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="createDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleCreateFile">创建</el-button>
        </span>
      </el-dialog>
      
      <!-- 上传文件对话框 -->
      <el-dialog
        title="上传文件"
        :visible.sync="uploadDialogVisible"
        width="500px"
        :close-on-click-modal="true"
        :close-on-press-escape="true"
      >
        <div class="upload-dialog-content">
          <el-upload
            class="file-uploader"
            action="#"
            :auto-upload="false"
            :on-change="handleFileChange"
            :file-list="uploadFiles"
            drag
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">拖拽文件到此处或 <em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">支持上传多种格式文件，单个文件不超过50MB</div>
          </el-upload>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="uploadDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleUploadFiles" :disabled="!uploadFiles.length">上传</el-button>
        </span>
      </el-dialog>

      <!-- 文件预览对话框 -->
      <el-dialog
        :title="previewFileData ? previewFileData.name : '文件预览'"
        :visible.sync="previewDialogVisible"
        width="90%"
        class="preview-dialog"
        :append-to-body="true"
        :close-on-click-modal="true"
        :close-on-press-escape="true"
      >
        <div class="preview-content" v-if="previewFileData">
          <div class="preview-header">
            <div class="file-info">
              <span class="file-type">{{ getFileType(previewFileData) }}</span>
              <span class="file-time">最后修改：{{ previewFileData.updateTime }}</span>
            </div>
            <div class="preview-actions">
              <el-button-group>
                <el-dropdown trigger="click" @command="handleExport">
                  <el-button size="small" type="primary">
                    <i class="el-icon-download"></i> 导出文件 <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="{type: 'doc', file: previewFileData}">
                      <i class="el-icon-document"></i> 导出需求文档
                    </el-dropdown-item>
                    <el-dropdown-item :command="{type: 'ppt', file: previewFileData}">
                      <i class="el-icon-picture"></i> 导出PPT
                    </el-dropdown-item>
                    <el-dropdown-item :command="{type: 'pdf', file: previewFileData}">
                      <i class="el-icon-document"></i> 导出PDF
                    </el-dropdown-item>
                    <el-dropdown-item :command="{type: 'png', file: previewFileData}">
                      <i class="el-icon-picture-outline"></i> 导出图片
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-button size="small" @click="$router.push('/edit')">
                  <i class="el-icon-edit"></i> 编辑
                </el-button>
              </el-button-group>
              
              <el-button 
                size="small"
                :type="previewFileData.isFavorite ? 'warning' : ''"
                @click="handleFileFavorite(previewFileData)"
              >
                <i :class="previewFileData.isFavorite ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
                {{ previewFileData.isFavorite ? '已收藏' : '收藏' }}
              </el-button>
              <el-button size="small">
                <i class="el-icon-share"></i> 分享
              </el-button>
              <el-button size="small" type="danger" @click="handleFileDelete(previewFileData)">
                <i class="el-icon-delete"></i> 删除
              </el-button>
            </div>
          </div>
          
          <div class="preview-body">
            <div class="preview-placeholder">
              <img v-if="previewFileData.cover" :src="previewFileData.cover" alt="预览图">
              <div v-else class="placeholder-icon">
                <i :class="getFileIcon(previewFileData)"></i>
                <div class="placeholder-text">文件预览加载中...</div>
                <div class="export-tips">
                  <div class="tip-item">
                    <i class="el-icon-document"></i>
                    <span>导出需求文档</span>
                  </div>
                  <div class="tip-item">
                    <i class="el-icon-picture"></i>
                    <span>导出PPT</span>
                  </div>
                </div>
                <el-button type="primary" @click="$router.push('/edit')">
                  点击打开编辑器进行查看和编辑
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Workspace',
  data() {
    return {
      activeNav: 'myFiles',
      viewMode: 'grid',
      upgradeDialogVisible: false,
      selectedPlan: 1, // 默认选择1年
      qrcodeExpired: false,
      qrcodeValue: 'https://example.com/pay/12345678',
      countdown: {
        hours: 9,
        minutes: 45,
        seconds: 23
      },
      countdownTimer: null,
      paymentCountdown: '02:24:00',
      paymentTimer: null,
      membershipPlans: [
        { name: '半年', price: 87, originalPrice: 99, dailyPrice: 0.48, discount: '88折' },
        { name: '1年', price: 99, originalPrice: 159, dailyPrice: 0.27, discount: '62折', popular: true },
        { name: '2年', price: 179, originalPrice: 318, dailyPrice: 0.25, discount: '56折' },
        { name: '3年', price: 229, originalPrice: 477, dailyPrice: 0.21, discount: '48折' },
        { name: '终身', price: 799, originalPrice: 1599, dailyPrice: null, discount: '50折', recommended: true }
      ],
      recentPayments: [
        {
          user: '李**峰',
          text: '刚刚开通了2年个人版会员',
          avatar: require('@/assets/avatar/布林.jpg'),
          time: '1分钟前',
          planType: '2年会员'
        },
        {
          user: '王**娜',
          text: '刚刚开通了3年个人版会员',
          avatar: require('@/assets/avatar/才镇.jpg'),
          time: '2分钟前',
          planType: '3年会员'
        },
        {
          user: '张**华',
          text: '刚刚开通了2年个人版会员',
          avatar: require('@/assets/avatar/阿晨.jpg'),
          time: '3分钟前',
          planType: '2年会员'
        },
        {
          user: '刘**强',
          text: '刚刚开通了1年个人版会员',
          avatar: require('@/assets/avatar/阿晨.jpg'),
          time: '5分钟前',
          planType: '1年会员'
        },
        {
          user: '陈**明',
          text: '刚刚开通了终身个人版会员',
          avatar: require('@/assets/avatar/布林.jpg'),
          time: '8分钟前',
          planType: '终身会员'
        },
        {
          user: '赵**芳',
          text: '刚刚开通了1年个人版会员',
          avatar: require('@/assets/avatar/才镇.jpg'),
          time: '10分钟前',
          planType: '1年会员'
        },
        {
          user: '杨**梅',
          text: '刚刚开通了2年个人版会员',
          avatar: require('@/assets/avatar/阿晨.jpg'),
          time: '12分钟前',
          planType: '2年会员'
        },
        {
          user: '周**龙',
          text: '刚刚开通了终身个人版会员',
          avatar: require('@/assets/avatar/布林.jpg'),
          time: '15分钟前',
          planType: '终身会员'
        },
        {
          user: '孙**敏',
          text: '刚刚开通了3年个人版会员',
          avatar: require('@/assets/avatar/才镇.jpg'),
          time: '18分钟前',
          planType: '3年会员'
        },
        {
          user: '郑**伟',
          text: '刚刚开通了1年个人版会员',
          avatar: require('@/assets/avatar/布林.jpg'),
          time: '20分钟前',
          planType: '1年会员'
        },
        {
          user: '马**丽',
          text: '刚刚开通了终身个人版会员',
          avatar: require('@/assets/avatar/阿晨.jpg'),
          time: '25分钟前',
          planType: '终身会员'
        },
        {
          user: '黄**杰',
          text: '刚刚开通了2年个人版会员',
          avatar: require('@/assets/avatar/才镇.jpg'),
          time: '30分钟前',
          planType: '2年会员'
        }
      ],
      paymentStats: {
        todayCount: 358,
        monthlyCount: 12679
      },
      
      // 新增数据
      searchKeyword: '',
      showUserMenu: false,
      userAvatar: require('@/assets/avatar/布林.jpg'),
      
      // 保留原有数据
      fileCount: 18,
      maxFiles: 20,
      showCapacity: true,
      files: [
        {
          id: 1,
          name: '酒店管理系统.mindmap',
          cover: null,
          isRecent: true,
          isCollaborating: false,
          isLocked: false,
          updateTime: '2024-01-20 15:30',
          isFavorite: false
        },
        {
          id: 2,
          name: '电商平台架构设计.mindmap',
          cover: null,
          isRecent: true,
          isCollaborating: true,
          isLocked: false,
          updateTime: '2024-01-19 10:15',
          isFavorite: true
        },
        {
          id: 3,
          name: '产品需求分析.mindmap',
          cover: null,
          isRecent: false,
          isCollaborating: false,
          isLocked: true,
          updateTime: '2024-01-18 09:45',
          isFavorite: true
        },
        {
          id: 4,
          name: '团队工作流程.mindmap',
          cover: null,
          isRecent: false,
          isCollaborating: true,
          isLocked: false,
          updateTime: '2024-01-17 16:20',
          isFavorite: false
        },
        {
          id: 5,
          name: '营销活动策划.mindmap',
          cover: null,
          isRecent: false,
          isCollaborating: false,
          isLocked: false,
          updateTime: '2024-01-16 13:10',
          isFavorite: false
        },
        {
          id: 6,
          name: '项目进度表.mindmap',
          cover: null,
          isRecent: false,
          isCollaborating: false,
          isLocked: false,
          updateTime: '2024-01-15 11:25',
          isFavorite: true
        },
        {
          id: 7,
          name: 'APP原型设计.prototype',
          cover: null,
          isRecent: true,
          isCollaborating: true,
          isLocked: false,
          updateTime: '2024-01-14 16:45',
          isFavorite: false
        },
        {
          id: 8,
          name: '官网重构方案.mindmap',
          cover: null,
          isRecent: false,
          isCollaborating: false,
          isLocked: false,
          updateTime: '2024-01-13 09:30',
          isFavorite: false
        }
      ],
      trashFiles: [
        {
          id: 1,
          name: '旧版酒店管理系统',
          deleteTime: '3天前',
          originalUpdateTime: '2024-01-15 14:30'
        },
        {
          id: 2,
          name: '2023年度报告',
          deleteTime: '15天前',
          originalUpdateTime: '2024-01-05 11:20'
        },
        {
          id: 3,
          name: '废弃的项目方案',
          deleteTime: '20天前',
          originalUpdateTime: '2023-12-31 09:15'
        }
      ],
      qrcodePlaceholderUrl: require('@/assets/img/payment-qrcode.png'),
      selectedFiles: [],
      sortBy: 'updateTime',
      sortOrder: 'desc',
      createDialogVisible: false,
      uploadDialogVisible: false,
      selectedTemplate: 0,
      fileTemplates: [
        {
          name: '思维导图',
          icon: 'el-icon-share',
          extension: '.mindmap',
          description: '用于创建思维导图、流程图等结构化内容'
        },
        {
          name: '原型设计',
          icon: 'el-icon-s-grid',
          extension: '.prototype',
          description: '用于创建应用或网站的交互原型'
        }
      ],
      newFileForm: {
        name: '',
        description: ''
      },
      uploadFiles: [],
      selectedRows: [],  // 表格视图选中的行
      
      // 添加预览相关数据
      previewDialogVisible: false,
      previewFileData: null, // 修改名称避免与方法重名
      
      // 添加通知相关数据
      showNotificationMenu: false,
      notifications: [
        {
          id: 1,
          title: '系统通知',
          desc: '您的账号已升级为高级会员',
          time: '2小时前',
          icon: 'el-icon-bell'
        },
        {
          id: 2,
          title: '协作邀请',
          desc: '用户张三邀请您协作编辑"产品需求分析"',
          time: '1天前',
          icon: 'el-icon-user'
        }
      ],
      
      // 添加更多菜单数据
      showMoreMenu: false,

      // 添加一个初始的filteredFilesTemp属性，防止在计算属性计算前使用时报错
      filteredFilesTemp: [],
    }
  },
  computed: {
    // 正确定义所有计算属性
    filteredFiles() {
      let result = this.files;
      
      // 搜索过滤
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase();
        result = result.filter(file => 
          file.name.toLowerCase().includes(keyword)
        );
      }
      
      // 根据当前导航筛选
      if (this.activeNav === 'favorites') {
        result = result.filter(file => file.isFavorite);
      }
      
      // 排序
      result = [...result].sort((a, b) => {
        const aValue = a[this.sortBy];
        const bValue = b[this.sortBy];
        const order = this.sortOrder === 'desc' ? -1 : 1;
        
        return aValue > bValue ? order : -order;
      });
      
      return result;
    },
    selectedPlanName() {
      return this.membershipPlans[this.selectedPlan].name;
    },
    selectedPlanPrice() {
      return this.membershipPlans[this.selectedPlan].price;
    },
    selectedPlanDailyPrice() {
      return this.membershipPlans[this.selectedPlan].dailyPrice || '--';
    },
    currentDiscount() {
      const plan = this.membershipPlans[this.selectedPlan];
      return plan.originalPrice - plan.price;
    }
  },
  methods: {
    switchNav(nav) {
      this.activeNav = nav
    },
    showUpgradeDialog() {
      this.upgradeDialogVisible = true
      this.startCountdown()
      this.startPaymentCountdown()
    },
    handleCloseUpgrade() {
      this.upgradeDialogVisible = false
      this.stopCountdown()
      this.stopPaymentCountdown()
    },
    selectPlan(index) {
      this.selectedPlan = index
      // 重置支付倒计时
      this.stopPaymentCountdown()
      this.startPaymentCountdown()
      // 重置二维码
      this.qrcodeExpired = false
      // 更新二维码值
      this.qrcodeValue = `https://example.com/pay/${this.selectedPlanPrice}_${Date.now()}`
    },
    refreshQrcode() {
      this.qrcodeExpired = false;
      // 调用生成新二维码的API，获取新的二维码URL
      // 这里模拟API调用，实际开发中应替换为真实的API调用
      setTimeout(() => {
        this.qrcodePlaceholderUrl = require('@/assets/img/payment-qrcode.png'); // 刷新时重新获取二维码
        this.qrcodeValue = `https://pay.jinsda.com/orders/${this.selectedPlanPrice}_${Date.now()}`;
        this.startPaymentCountdown();
      }, 500);
    },
    startPaymentCountdown() {
      if (this.paymentTimer) {
        clearInterval(this.paymentTimer)
      }
      
      let totalSeconds = 180; // 3分钟倒计时
      
      const updateCountdown = () => {
        const minutes = Math.floor(totalSeconds / 60);
        const seconds = totalSeconds % 60;
        this.paymentCountdown = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}:00`;
        
        if (totalSeconds <= 0) {
          this.stopPaymentCountdown();
          this.qrcodeExpired = true;
          return;
        }
        
        totalSeconds--;
      };
      
      updateCountdown();
      this.paymentTimer = setInterval(updateCountdown, 1000);
    },
    stopPaymentCountdown() {
      if (this.paymentTimer) {
        clearInterval(this.paymentTimer);
        this.paymentTimer = null;
      }
    },
    startCountdown() {
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer)
      }
      this.countdownTimer = setInterval(() => {
        if (this.countdown.seconds > 0) {
          this.countdown.seconds--
        } else if (this.countdown.minutes > 0) {
          this.countdown.minutes--
          this.countdown.seconds = 59
        } else if (this.countdown.hours > 0) {
          this.countdown.hours--
          this.countdown.minutes = 59
          this.countdown.seconds = 59
        } else {
          this.stopCountdown()
        }
      }, 1000)
    },
    stopCountdown() {
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer)
        this.countdownTimer = null
      }
    },
    handleCreate() {
      // 处理新建文件
      this.$router.push('/edit')
    },
    handleUpload() {
      // 处理文件上传
    },
    handleRestore(file) {
      this.$confirm('确定要恢复此文件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        const index = this.trashFiles.findIndex(f => f.id === file.id);
        if (index !== -1) {
          const restoredFile = this.trashFiles.splice(index, 1)[0];
          this.files.unshift({
            id: restoredFile.id,
            name: restoredFile.name,
            cover: null,
            isRecent: true,
            isCollaborating: false,
            isLocked: false,
            updateTime: new Date().toLocaleString(),
            isFavorite: false
          });
          this.$message.success('文件已恢复');
        }
      }).catch(() => {});
    },
    handlePermanentDelete(file) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        const index = this.trashFiles.findIndex(f => f.id === file.id);
        if (index !== -1) {
          this.trashFiles.splice(index, 1);
          this.$message.success('文件已永久删除');
        }
      }).catch(() => {});
    },
    toggleUserMenu() {
      this.showUserMenu = !this.showUserMenu;
      this.showMoreMenu = false;
      this.showNotificationMenu = false;
    },
    handleLogout() {
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里可以添加退出登录的逻辑，如清除token等
        this.$message.success('退出登录成功');
        // 跳转到登录页或首页
        this.$router.push('/');
      }).catch(() => {
        // 取消退出
      });
    },
    handleFileSelect(file) {
      const index = this.selectedFiles.indexOf(file.id);
      if (index === -1) {
        this.selectedFiles.push(file.id);
      } else {
        this.selectedFiles.splice(index, 1);
      }
    },
    handleFileFavorite(file) {
      const index = this.files.findIndex(f => f.id === file.id);
      if (index !== -1) {
        this.files[index].isFavorite = !this.files[index].isFavorite;
        this.$message.success(this.files[index].isFavorite ? '已添加到收藏夹' : '已取消收藏');
      }
    },
    handleFileDelete(file) {
      this.$confirm('确定要将文件移到回收站吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.files.findIndex(f => f.id === file.id);
        if (index !== -1) {
          const deletedFile = this.files.splice(index, 1)[0];
          this.trashFiles.unshift({
            id: deletedFile.id,
            name: deletedFile.name,
            deleteTime: '刚刚',
            originalUpdateTime: deletedFile.updateTime
          });
          this.$message.success('文件已移至回收站');
        }
      }).catch(() => {});
    },
    toggleViewMode() {
      this.viewMode = this.viewMode === 'grid' ? 'list' : 'grid';
    },
    handleSort(sortBy) {
      if (this.sortBy === sortBy) {
        this.sortOrder = this.sortOrder === 'desc' ? 'asc' : 'desc';
      } else {
        this.sortBy = sortBy;
        this.sortOrder = 'desc';
      }
    },
    handleEmptyTrash() {
      this.$confirm('确定要清空回收站吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.trashFiles = [];
        this.$message.success('回收站已清空');
      }).catch(() => {});
    },
    showCreateDialog() {
      this.createDialogVisible = true;
      this.selectedTemplate = 0;
      this.newFileForm = {
        name: '',
        description: ''
      };
    },
    handleCreateFile() {
      if (!this.newFileForm.name) {
        this.$message.warning('请输入文件名称');
        return;
      }
      
      const template = this.fileTemplates[this.selectedTemplate];
      const newFile = {
        id: this.files.length + 1,
        name: this.newFileForm.name + template.extension,
        cover: null,
        isRecent: true,
        isCollaborating: false,
        isLocked: false,
        updateTime: new Date().toLocaleString(),
        isFavorite: false
      };
      
      this.files.unshift(newFile);
      this.createDialogVisible = false;
      this.$message.success('文件创建成功');
      
      // 模拟跳转到编辑页面
      setTimeout(() => {
        this.$router.push('/edit');
      }, 500);
    },
    showUploadDialog() {
      this.uploadDialogVisible = true;
      this.uploadFiles = [];
    },
    handleFileChange(file, fileList) {
      this.uploadFiles = fileList;
    },
    handleUploadFiles() {
      if (!this.uploadFiles.length) {
        this.$message.warning('请选择要上传的文件');
        return;
      }
      
      // 模拟上传过程
      const loading = this.$loading({
        lock: true,
        text: '文件上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      
      setTimeout(() => {
        loading.close();
        
        // 添加上传的文件到文件列表
        this.uploadFiles.forEach((file, index) => {
          this.files.unshift({
            id: this.files.length + index + 1,
            name: file.name,
            cover: null,
            isRecent: true,
            isCollaborating: false,
            isLocked: false,
            updateTime: new Date().toLocaleString(),
            isFavorite: false
          });
        });
        
        this.$message.success(`成功上传 ${this.uploadFiles.length} 个文件`);
        this.uploadDialogVisible = false;
      }, 1500);
    },
    handleSelectionChange(rows) {
      this.selectedRows = rows;
      this.selectedFiles = rows.map(row => row.id);
    },
    clearSelection() {
      this.selectedFiles = [];
      this.selectedRows = [];
      this.$refs.fileTable && this.$refs.fileTable.clearSelection();
    },
    handleBatchFavorite() {
      this.selectedRows.forEach(row => {
        const index = this.files.findIndex(f => f.id === row.id);
        if (index !== -1) {
          this.files[index].isFavorite = true;
        }
      });
      this.$message.success(`已将 ${this.selectedRows.length} 个文件添加到收藏夹`);
    },
    handleBatchShare() {
      this.$message.info(`分享 ${this.selectedRows.length} 个文件的功能即将上线`);
    },
    handleBatchDelete() {
      this.$confirm(`确定要将 ${this.selectedRows.length} 个文件移到回收站吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.selectedRows.forEach(row => {
          const index = this.files.findIndex(f => f.id === row.id);
          if (index !== -1) {
            const deletedFile = this.files.splice(index, 1)[0];
            this.trashFiles.unshift({
              id: deletedFile.id,
              name: deletedFile.name,
              deleteTime: '刚刚',
              originalUpdateTime: deletedFile.updateTime
            });
          }
        });
        
        this.$message.success(`已将 ${this.selectedRows.length} 个文件移至回收站`);
        this.clearSelection();
      }).catch(() => {});
    },
    // 修改previewFile方法名，避免与data属性冲突
    previewFileMethod(file) {
      this.previewFileData = file;
      this.previewDialogVisible = true;
    },
    showNotifications() {
      this.showNotificationMenu = !this.showNotificationMenu;
      this.showMoreMenu = false;
      this.showUserMenu = false;
    },
    toggleMoreMenu() {
      this.showMoreMenu = !this.showMoreMenu;
      this.showNotificationMenu = false;
      this.showUserMenu = false;
    },
    markAllAsRead() {
      this.$message.success('已将所有消息标记为已读');
    },
    getFileIcon(file) {
      if (!file || !file.name) return 'el-icon-document';
      
      const extension = file.name.split('.').pop().toLowerCase();
      
      const iconMap = {
        'mindmap': 'el-icon-share',
        'prototype': 'el-icon-s-grid',
        'chart': 'el-icon-s-data',
        'whiteboard': 'el-icon-edit',
        'doc': 'el-icon-document',
        'docx': 'el-icon-document',
        'xls': 'el-icon-s-order',
        'xlsx': 'el-icon-s-order',
        'ppt': 'el-icon-picture',
        'pptx': 'el-icon-picture',
        'pdf': 'el-icon-document',
        'jpg': 'el-icon-picture-outline',
        'jpeg': 'el-icon-picture-outline',
        'png': 'el-icon-picture-outline',
        'gif': 'el-icon-picture-outline',
      };
      
      return iconMap[extension] || 'el-icon-document';
    },
    getFileType(file) {
      if (!file || !file.name) return '未知文件类型';
      
      const extension = file.name.split('.').pop().toLowerCase();
      
      const typeMap = {
        'mindmap': '思维导图',
        'prototype': '原型设计',
        'chart': '数据图表',
        'whiteboard': '白板',
        'doc': 'Word文档',
        'docx': 'Word文档',
        'xls': 'Excel表格',
        'xlsx': 'Excel表格',
        'ppt': 'PPT演示文稿',
        'pptx': 'PPT演示文稿',
        'pdf': 'PDF文档',
        'jpg': '图片',
        'jpeg': '图片',
        'png': '图片',
        'gif': '动态图片',
      };
      
      return typeMap[extension] || '未知文件类型';
    },
    showGiftDialog() {
      this.$message({
        message: '邀请好友功能即将上线，敬请期待！',
        type: 'info'
      });
    },
    showDownloadDialog() {
      this.$message({
        message: '客户端下载功能即将上线，敬请期待！',
        type: 'info'
      });
    },
    handleExport(command) {
      const { type, file } = command;
      let message = '';
      
      switch(type) {
        case 'doc':
          message = `正在将"${file.name}"导出为需求文档...`;
          break;
        case 'ppt':
          message = `正在将"${file.name}"导出为PPT演示文稿...`;
          break;
        case 'pdf':
          message = `正在将"${file.name}"导出为PDF文件...`;
          break;
        case 'png':
          message = `正在将"${file.name}"导出为PNG图片...`;
          break;
      }
      
      const loading = this.$loading({
        lock: true,
        text: message,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      
      // 模拟导出过程
      setTimeout(() => {
        loading.close();
        this.$message.success(`${file.name}已成功导出`);
      }, 1500);
    },
  },
  beforeDestroy() {
    this.stopCountdown()
    this.stopPaymentCountdown()
  }
}
</script>

<style lang="scss" scoped>
// 升级按钮样式
.upgrade-btn {
  font-size: 12px;
  height: 24px;
  line-height: 22px;
  padding: 0 12px;
  background: linear-gradient(90deg, #7239EA 0%, #8F6EEB 100%);
  border: none;
  border-radius: 12px;
  color: #fff;

  &:hover {
    background: linear-gradient(90deg, #6229DA 0%, #7F5EDB 100%);
  }
}

// 会员升级弹窗样式
.upgrade-dialog {
  ::v-deep .el-dialog {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
  }
  
  ::v-deep .el-dialog__body {
    padding: 0;
  }
  
  .upgrade-close-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 20px;
    color: white;
    cursor: pointer;
    z-index: 20;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    
    &:hover {
      background: rgba(255, 255, 255, 0.4);
    }
  }
  
  .upgrade-header {
    background: linear-gradient(135deg, #7239EA 0%, #8F6EEB 100%);
    color: white;
    padding: 24px 30px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .header-left {
      display: flex;
      align-items: center;
      
      .logo-container {
        width: 32px;
        height: 32px;
        background: white;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        
        .logo {
          width: 24px;
          height: 24px;
        }
      }
      
      .header-text {
        font-size: 18px;
      font-weight: 500;
      }
    }
    
    .countdown {
      font-size: 14px;
      display: flex;
      align-items: center;
      margin-left: auto;
      margin-right: 40px; // 为关闭按钮留出空间
      
      i {
        margin-right: 6px;
        opacity: 0.6;
      }
    }
    
    .header-close {
      display: none; // 隐藏旧的关闭按钮
    }
    }
  }

  .upgrade-content {
  background: white;
  padding: 24px 30px 30px;
  
  .content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
      margin-bottom: 24px;

      .title {
      font-size: 18px;
      font-weight: 600;
        color: #333;
      }

      .countdown {
        font-size: 14px;
      color: #333;
      
      .time-highlight {
        color: #FF3B8B;
        font-weight: 600;
        margin: 0 4px;
      }
      }
    }

    .plan-list {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

      .plan-item {
      flex: 1;
      border: 1px solid #E9E9E9;
      border-radius: 6px;
      padding: 22px 10px;
      text-align: center;
        cursor: pointer;
        transition: all 0.3s;
      margin: 0 6px;
        position: relative;
      
      &:first-child {
        margin-left: 0;
      }
      
      &:last-child {
        margin-right: 0;
      }

        &:hover {
        border-color: #178AFF;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        &.active {
        background: #ECF5FF;
        border-color: #178AFF;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(23, 138, 255, 0.15);
      }
      
      &.popular {
        border-color: #FF3B8B;
        
        &:hover, &.active {
          border-color: #FF3B8B;
          box-shadow: 0 5px 15px rgba(255, 59, 139, 0.15);
        }
      }
      
      &.recommended {
        border-color: #FFC53D;
        
        &:hover, &.active {
          border-color: #FFC53D;
          box-shadow: 0 5px 15px rgba(255, 197, 61, 0.15);
        }
      }
      
      .popular-tag, .recommended-tag {
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        padding: 2px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
        color: white;
      }
      
      .popular-tag {
        background: #FF3B8B;
      }
      
      .recommended-tag {
        background: #FFC53D;
        }

        .plan-name {
        font-size: 16px;
          font-weight: 500;
        margin-bottom: 12px;
          color: #333;
        }

        .plan-price {
          margin-bottom: 4px;
        font-weight: bold;
        color: #333;

          .currency {
          font-size: 16px;
          vertical-align: top;
          margin-right: 2px;
          }

          .amount {
          font-size: 28px;
          }
        }

        .original-price {
        font-size: 14px;
        color: #999;
          text-decoration: line-through;
          margin-bottom: 8px;
        }

      .discount-badge {
        display: inline-block;
        padding: 2px 8px;
        background: #FFF1F0;
        color: #FF4D4F;
        border-radius: 10px;
          font-size: 12px;
        margin-bottom: 10px;
      }
      
      .plan-feature {
        font-size: 13px;
        color: #666;
        
        .feature-value {
          font-weight: 500;
          color: #178AFF;
        }
      }
    }
  }
  
  .daily-price-notice {
    background: #F5F5F5;
    padding: 16px;
    text-align: center;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }
  
  .payment-notice {
    color: #999;
    font-size: 12px;
    text-align: center;
    margin-bottom: 24px;
    
    .terms-link {
      color: #178AFF;
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
        }
      }
    }

    .payment-section {
      display: flex;
    margin-bottom: 30px;

      .qrcode-section {
      width: 230px;
      padding-right: 20px;

        .qrcode-wrapper {
          width: 200px;
          height: 200px;
        margin-bottom: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #E9E9E9;
        padding: 5px;
        position: relative;
        
        .qrcode-expired {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(255, 255, 255, 0.9);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 10px;
          
          span {
            font-size: 14px;
            color: #FF4D4F;
          }
        }
        
        .qrcode-image {
          max-width: 100%;
          max-height: 100%;
        }
      }
      
      .price-section {
        margin-bottom: 10px;
        display: flex;
        align-items: center;

          .price {
          font-size: 22px;
            font-weight: bold;
            color: #333;
          margin-right: 10px;
          }

          .discount-tag {
            background: #FFF1F0;
          color: #FF4D4F;
            padding: 2px 8px;
          border-radius: 12px;
          font-size: 12px;
          display: flex;
          align-items: center;
          
          i {
            margin-right: 4px;
          }
        }
      }
      
      .payment-countdown {
          margin-bottom: 12px;
        color: #666;
        font-size: 12px;
        display: flex;
        align-items: center;

          i {
            color: #FF4D4F;
          margin-right: 4px;
        }
      }
      
      .payment-methods {
        margin-bottom: 12px;
        
        .payment-method-title {
          font-size: 13px;
          font-weight: 500;
          color: #333;
          margin-bottom: 8px;
        }
        
        .payment-method-list {
          display: flex;
          gap: 8px;
          
          .method-item {
            flex: 1;
            border: 1px solid #E9E9E9;
            border-radius: 4px;
            padding: 6px 4px;
            display: flex;
            align-items: center;
            justify-content: center;
          font-size: 12px;
            color: #666;
            cursor: pointer;
            position: relative;
            
            i {
              margin-right: 4px;
            }
            
            &.active {
              border-color: #7239EA;
            color: #7239EA;
              background: rgba(114, 57, 234, 0.05);
              
              .check-icon {
                position: absolute;
                right: -5px;
                top: -5px;
                background: #7239EA;
                color: white;
                border-radius: 50%;
                width: 16px;
                height: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 10px;
              }
            }
          }
        }
      }
      
      .terms-agreement {
        font-size: 12px;
        color: #666;
      }
    }
    
    .recent-payments {
        flex: 1;
      background: #F9F9F9;
        border-radius: 8px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      
      .recent-header {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        font-size: 14px;
        font-weight: 500;
        color: #333;
        
        i {
          color: #FF9500;
          margin-right: 6px;
          font-size: 16px;
        }
        
        .payment-count {
          font-size: 12px;
          color: #FF3B8B;
          margin-left: 5px;
          font-weight: normal;
        }
      }
      
      .payment-items-wrapper {
        flex: 1;
        overflow-y: auto;
        max-height: 160px;
        margin-bottom: 16px;
        position: relative;
        padding-right: 4px;
        
        &::-webkit-scrollbar {
          width: 4px;
        }
        
        &::-webkit-scrollbar-thumb {
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 2px;
        }
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 4px;
          height: 20px;
          background: linear-gradient(to top, rgba(249, 249, 249, 1), rgba(249, 249, 249, 0));
          pointer-events: none;
        }
      }
      
          .payment-item {
            display: flex;
            align-items: center;
            padding: 8px 0;
        position: relative;
        border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
        
        &:last-child {
          border-bottom: none;
        }

            .user-avatar {
          width: 28px;
          height: 28px;
              border-radius: 50%;
          margin-right: 10px;
              object-fit: cover;
          border: 2px solid #fff;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
        
        .payment-info {
          flex: 1;
          min-width: 0;
          
          .payment-user {
            font-size: 12px;
            color: #178AFF;
            margin-bottom: 2px;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            }

            .payment-text {
            font-size: 12px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        
        .payment-plan-tag {
          font-size: 11px;
          padding: 2px 8px;
          border-radius: 10px;
          color: white;
          background: #178AFF;
          margin-right: 8px;
          white-space: nowrap;
          
          &.plan-lifetime {
            background: linear-gradient(90deg, #FF3B8B 0%, #FF6CAB 100%);
          }
        }
        
        .payment-time {
          font-size: 11px;
          color: #999;
          white-space: nowrap;
        }
      }
      
      .payment-stats {
        display: flex;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        padding-top: 16px;
        margin-bottom: 16px;
        
        .stat-item {
              flex: 1;
          text-align: center;
          
          &:first-child {
            border-right: 1px solid rgba(0, 0, 0, 0.06);
          }
          
          .stat-value {
            font-size: 18px;
            font-weight: bold;
            color: #FF3B8B;
            margin-bottom: 4px;
          }
          
          .stat-label {
            font-size: 12px;
            color: #666;
          }
        }
      }
      
      .hot-plan-tip {
        border-top: 1px dashed rgba(0, 0, 0, 0.06);
        padding-top: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
        color: #FF9500;
      font-size: 13px;

        i {
          margin-right: 6px;
        }
      }
    }
  }
  
  .member-benefits {
        display: flex;
    justify-content: center;
        align-items: center;
    border-top: 1px solid #E9E9E9;
    padding-top: 20px;
    
    .benefit-item {
      display: flex;
      align-items: center;
      margin: 0 16px;
      color: #666;
      font-size: 13px;
      
      i {
        margin-right: 6px;
        color: #7239EA;
      }
    }
    
    .info-icon {
      width: 16px;
      height: 16px;
      margin: 0 8px;
      color: #999;
    }
    
    .more-benefits {
      margin-left: 16px;
      color: #178AFF;
        cursor: pointer;
      font-size: 13px;

        &:hover {
          text-decoration: underline;
      }
    }
  }
}

.workspace {
  display: flex;
  height: 100vh;
  background-color: #F8F9FA;

  .workspace-sidebar {
    width: 200px;
    background-color: #fff;
    border-right: 1px solid #E9ECEF;
    padding: 20px 0;

    .logo-area {
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #E9ECEF;
      margin-bottom: 20px;
      flex-direction: column;
      
      .logo-section {
        display: flex;
        align-items: center;
        
        .logo-container {
          width: 36px;
          height: 36px;
          background: #F0F2FF;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
        margin-right: 10px;
          box-shadow: 0 2px 5px rgba(114, 57, 234, 0.1);
          
          .logo {
            width: 28px;
            height: 28px;
          }
        }
      }

      .platform-name {
        font-size: 16px;
        font-weight: 500;
        color: #333;
        white-space: nowrap;
      }
    }

    .nav-list {
      .nav-section {
        margin-bottom: 20px;

        .nav-title {
          padding: 0 20px;
          margin-bottom: 8px;
          color: #6C757D;
          font-size: 12px;
        }
      }

      .nav-item {
        padding: 12px 20px;
        display: flex;
        align-items: center;
        cursor: pointer;
        color: #333;

        &:hover {
          background-color: #F8F9FA;
        }

        &.active {
          background-color: #F0F2FF;
          color: #7239EA;
        }

        i {
          margin-right: 8px;
          font-size: 16px;
        }

        .capacity-info {
          margin-left: auto;
          font-size: 12px;
          color: #6C757D;
        }
      }
    }
  }

  .workspace-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;

    .operation-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding: 10px 20px;
      
      .left-actions {
        display: flex;
        align-items: center;
      }
      
      .file-actions {
          margin-left: 12px;
      }
      
      .search-bar {
        width: 280px;
        .el-input__inner {
          border-radius: 20px;
          background: #F6F6F6;
        }
      }
      
      .view-actions {
        margin-left: auto;
      }
      
      .sort-actions {
        margin-left: auto;
      }
      
      .user-actions {
        display: flex;
        align-items: center;
        
        .action-btn {
          margin-left: 12px;
          cursor: pointer;
          position: relative;
          
          i {
            font-size: 20px;
            color: #666;
          }
          
          &.ai-promo {
            background: linear-gradient(90deg, #FF3B8B 0%, #B84BFF 100%);
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 13px;
            
            .ai-text {
              display: flex;
              align-items: center;
              
              .discount {
                font-weight: bold;
                margin-left: 4px;
              }
            }
          }
          
          .badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #FF3B3B;
            color: white;
            font-size: 10px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        
        .user-avatar {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          overflow: hidden;
          margin-left: 16px;
          position: relative;
          cursor: pointer;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          
          .user-menu {
            position: absolute;
            top: 40px;
            right: 0;
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            z-index: 10;
            min-width: 120px;
            
            .menu-item {
              padding: 10px 16px;
              font-size: 13px;
              color: #333;
              
              &:hover {
                background: #F6F6F6;
              }
              
              &.logout {
                border-top: 1px solid #EFEFEF;
                color: #FF3B3B;
              }
            }
          }
        }
      }
    }

    .file-list {
      &.grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 24px;
        padding: 12px;

        .file-card {
          background: #fff;
          border-radius: 8px;
          overflow: hidden;
          transition: all 0.3s;
          border: 1px solid #E9ECEF;
          cursor: pointer;
          position: relative;

          &:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
          }
          
          &.is-selected {
            border-color: #7239EA;
            box-shadow: 0 0 0 2px rgba(114, 57, 234, 0.2);
          }

          .file-cover {
            height: 140px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid #E9ECEF;

            .file-actions {
              position: absolute;
              top: 8px;
              right: 8px;
              display: flex;
              gap: 8px;
              opacity: 0;
              transition: opacity 0.3s;
              
              .el-button {
                background: rgba(255, 255, 255, 0.9);
                border: none;
                
                &:hover {
                  transform: scale(1.1);
                }
              }
            }
          }

          .file-info {
            padding: 16px;
            background: #fff;

            .file-name {
              font-size: 14px;
              margin-bottom: 12px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #303133;
              font-weight: 500;
            }
            
            .file-meta {
              font-size: 12px;
              color: #666;
              margin: 4px 0;
            }

            .file-tags {
              display: flex;
              flex-wrap: wrap;
              gap: 6px;

              .el-tag {
                margin: 0;
                border-radius: 4px;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1280px) {
  .workspace {
    .workspace-sidebar {
      width: 160px;
    }
  }
}

.qrcode-wrapper {
  width: 200px;
  height: 200px;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #E9E9E9;
  padding: 5px;
  position: relative;
  
  .qrcode-expired {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    
    span {
      font-size: 14px;
      color: #FF4D4F;
    }
  }
  
  .qrcode-image {
    max-width: 100%;
    max-height: 100%;
  }
}

.file-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  
  i {
    color: #666;
  }
  
  .el-tag {
    margin-left: 8px;
  }
}

.trash-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
  
  .trash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h3 {
      margin: 0;
      font-size: 16px;
      color: #333;
    }
  }
  
  .el-table {
    border-radius: 4px;
    overflow: hidden;
  }
}

.operation-bar {
  background: white;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .left-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .search-bar {
      width: 280px;
    }
    
    .view-actions {
      .el-button-group {
        .el-button {
          padding: 8px 12px;
          
          &.is-active {
            background: #7239EA;
            color: white;
            border-color: #7239EA;
          }
        }
      }
    }
    
    .sort-actions {
      .el-dropdown {
        margin-left: 8px;
      }
    }
  }
}

// 添加滚动条样式
.file-list, .trash-content {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
    
    &:hover {
      background: #999;
    }
  }
}

// 表格内的按钮组样式
.el-table {
  .el-button-group {
    .el-button {
      padding: 7px 12px;
      
      &:not(:last-child) {
        margin-right: -1px;
      }
    }
  }
}

// 批量操作工具栏样式
.batch-actions {
  background: white;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  
  .selected-count {
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }
  
  .action-buttons {
    display: flex;
    gap: 8px;
  }
}

// 卡片视图中的文件操作按钮
.file-operations {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  opacity: 0.6;
  transition: opacity 0.3s;
  
  .el-button {
    padding: 0;
    margin: 0;
    margin-right: 12px;
    
    &:last-child {
      margin-right: 0;
    }
    
    i {
      margin-right: 4px;
    }
  }
}

.file-card:hover {
  .file-operations {
    opacity: 1;
  }
}

// 文件卡片内部样式优化
.file-card {
  &:hover .file-cover {
    .file-actions {
      opacity: 1;
    }
  }
  
  .file-cover {
    i {
      font-size: 48px;
      color: #909399;
    }
  }
}

// 文件预览对话框样式
.preview-dialog {
  ::v-deep .el-dialog {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  }
  
  ::v-deep .el-dialog__header {
    background: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
    
    .el-dialog__title {
      font-weight: 600;
      font-size: 16px;
    }
    
    .el-dialog__headerbtn {
      top: 15px;
    }
  }
  
  ::v-deep .el-dialog__body {
    padding: 0;
  }
  
  .preview-content {
    .preview-header {
      padding: 16px 20px;
      border-bottom: 1px solid #E9ECEF;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      
      .file-info {
        .file-type {
          display: inline-block;
          padding: 4px 10px;
          background: rgba(23, 138, 255, 0.1);
          color: #178AFF;
          border-radius: 4px;
          font-weight: 500;
          margin-right: 16px;
        }
        
        .file-time {
          font-size: 13px;
          color: #666;
        }
      }
      
      .preview-actions {
        display: flex;
        gap: 8px;
      }
    }
    
    .preview-body {
      background: #f8f9fa;
      height: 70vh;
      position: relative;
      overflow: auto;
      
      .preview-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        
        img {
          max-width: 90%;
          max-height: 80%;
          box-shadow: 0 3px 15px rgba(0,0,0,0.1);
          border-radius: 4px;
        }
        
        .placeholder-icon {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          
          i {
            font-size: 80px;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #42b983, #178AFF);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          
          .placeholder-text {
            font-size: 18px;
            color: #606266;
            margin-bottom: 20px;
          }
          
          .export-tips {
            display: flex;
            gap: 30px;
            margin-bottom: 30px;
            
            .tip-item {
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 15px 25px;
              background: #fff;
              border-radius: 8px;
              box-shadow: 0 2px 12px rgba(0,0,0,0.05);
              transition: all 0.3s;
              cursor: pointer;
              
              &:hover {
                transform: translateY(-5px);
                box-shadow: 0 5px 15px rgba(0,0,0,0.1);
              }
              
              i {
                font-size: 30px;
                margin-bottom: 10px;
              }
              
              span {
                font-size: 14px;
                color: #606266;
              }
            }
          }
          
          .el-button {
            padding: 12px 25px;
            border-radius: 25px;
            font-weight: 500;
            transition: all 0.3s;
            
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            }
          }
        }
      }
    }
  }
}

// 文件创建对话框样式
.create-dialog-content {
  display: flex;
  
  .template-list {
    width: 200px;
    border-right: 1px solid #E9ECEF;
    padding-right: 16px;
    
    .template-item {
      display: flex;
      padding: 12px;
      border-radius: 6px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        background: #F8F9FA;
      }
      
      &.active {
        background: #ECF5FF;
        
        .template-icon {
          i {
            color: #7239EA;
          }
        }
        
        .template-info {
          .template-name {
            color: #7239EA;
          }
        }
      }
      
      .template-icon {
        width: 40px;
        height: 40px;
        background: #F8F9FA;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        
        i {
          font-size: 20px;
          color: #666;
        }
      }
      
      .template-info {
        flex: 1;
        
        .template-name {
          font-size: 14px;
          font-weight: 500;
          color: #333;
          margin-bottom: 4px;
        }
        
        .template-desc {
          font-size: 12px;
          color: #666;
          line-height: 1.4;
        }
      }
    }
  }
  
  .file-info-form {
    flex: 1;
    padding-left: 16px;
  }
}

// 文件上传对话框样式
.upload-dialog-content {
  .file-uploader {
    width: 100%;
    
    ::v-deep .el-upload {
      width: 100%;
      
      .el-upload-dragger {
        width: 100%;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        i {
          font-size: 40px;
          color: #C0C4CC;
          margin-bottom: 16px;
        }
        
        .el-upload__text {
          font-size: 14px;
          color: #666;
          
          em {
            color: #178AFF;
            font-weight: 500;
            font-style: normal;
          }
        }
      }
    }
    
    ::v-deep .el-upload__tip {
      text-align: center;
      margin-top: 12px;
    }
  }
}

// 添加用户操作区域的样式
.user-actions {
  // ... existing styles ...
  
  .action-btn {
    // ... existing styles ...
    
    .action-tooltip {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  
  .notification-dropdown, .more-dropdown {
    position: absolute;
    top: 40px;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
    width: 300px;
    overflow: hidden;
  }
  
  .notification-header {
    padding: 12px 16px;
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    justify-content: space-between;
    
    span {
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }
    
    .read-all {
      font-size: 12px;
      color: #178AFF;
      cursor: pointer;
      font-weight: normal;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
  
  .notification-list {
    max-height: 400px;
    overflow-y: auto;
    
    .notification-item {
      padding: 12px 16px;
      display: flex;
      border-bottom: 1px solid #EFEFEF;
      cursor: pointer;
      
      &:hover {
        background: #F8F9FA;
      }
      
      .notification-icon {
        margin-right: 12px;
        
        i {
          font-size: 18px;
          color: #178AFF;
        }
      }
      
      .notification-content {
        flex: 1;
        
        .notification-title {
          font-size: 14px;
          font-weight: 500;
          color: #333;
          margin-bottom: 4px;
        }
        
        .notification-desc {
          font-size: 12px;
          color: #666;
          margin-bottom: 4px;
          line-height: 1.5;
        }
        
        .notification-time {
          font-size: 11px;
          color: #999;
        }
      }
    }
  }
  
  .notification-footer {
    padding: 12px 16px;
    text-align: center;
    border-top: 1px solid #EFEFEF;
    
    span {
      font-size: 12px;
      color: #178AFF;
      cursor: pointer;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
  
  .more-dropdown {
    width: 150px;
    
    .more-item {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      cursor: pointer;
      
      &:hover {
        background: #F8F9FA;
      }
      
      i {
        margin-right: 8px;
        font-size: 16px;
        color: #666;
      }
      
      span {
        font-size: 14px;
        color: #333;
      }
    }
  }
}

// 添加右上角更多菜单样式
.more-menu {
  position: absolute;
  top: 40px;
  right: 0;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
  min-width: 140px;
  
  .menu-item {
    padding: 10px 16px;
    font-size: 13px;
    color: #333;
    display: flex;
    align-items: center;
    
    i {
      margin-right: 8px;
      font-size: 16px;
    }
    
    &:hover {
      background: #F6F6F6;
    }
  }
}

// 添加通知样式
.notification-btn {
  position: relative;
}

// 通知下拉菜单样式
.notification-dropdown {
  position: absolute;
  top: 40px;
  right: 0;
  width: 320px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
  
  .notification-header {
    padding: 12px 16px;
    border-bottom: 1px solid #E9ECEF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    span {
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }
    
    .read-all {
      font-size: 12px;
      color: #178AFF;
      cursor: pointer;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
  
  .notification-list {
    max-height: 320px;
    overflow-y: auto;
    
    .notification-item {
      padding: 12px 16px;
      display: flex;
      align-items: flex-start;
      border-bottom: 1px solid #F2F2F2;
      cursor: pointer;
      
      &:hover {
        background: #F8F9FA;
      }
      
      .notification-icon {
        width: 36px;
        height: 36px;
        background: #ECF5FF;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        
        i {
          font-size: 18px;
          color: #178AFF;
        }
      }
      
      .notification-content {
        flex: 1;
        
        .notification-title {
          font-size: 14px;
          font-weight: 500;
          color: #333;
          margin-bottom: 4px;
        }
        
        .notification-desc {
          font-size: 12px;
          color: #666;
          margin-bottom: 4px;
          line-height: 1.4;
        }
        
        .notification-time {
          font-size: 11px;
          color: #999;
        }
      }
    }
  }
  
  .notification-footer {
    text-align: center;
    padding: 10px;
    border-top: 1px solid #E9ECEF;
    
    span {
      font-size: 12px;
      color: #178AFF;
      cursor: pointer;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

// 版权信息样式
.copyright-footer {
  margin-top: 30px;
  padding: 15px 0;
  text-align: center;
  border-top: 1px solid #f0f0f0;
  position: fixed;
  bottom: 0;
  left: 250px;
  right: 0;
  background-color: #fff;
  z-index: 10;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
  
  .copyright-text {
    color: #909399;
    font-size: 12px;
    line-height: 1.5;
  }
}

// 修改文件列表区域的样式，使其有足够的底部边距
.workspace-content {
  .content-main {
    padding-bottom: 60px; // 为版权信息预留空间
  }
}

// 空文件列表样式优化
.empty-file-list {
  text-align: center;
  padding: 80px 0;
  color: #909399;
  
  i {
    font-size: 64px;
    margin-bottom: 20px;
    color: #DCDFE6;
  }
  
  p {
    font-size: 16px;
    margin-bottom: 20px;
    color: #606266;
  }
  
  .el-button {
    width: 200px;
    height: 40px;
    background: #409EFF;
    border-color: #409EFF;
    color: #fff;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    
    &:hover {
      background: #66b1ff;
      border-color: #66b1ff;
    }
  }
}

// 美化文件卡片
.file-card {
  position: relative;
  border-radius: 8px;
  transition: all 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    
    .export-badge {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .file-cover {
    position: relative;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    
    img {
      max-width: 100%;
      max-height: 100%;
    }
    
    .file-type-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      i {
        font-size: 48px;
        margin-bottom: 8px;
        background: linear-gradient(135deg, #42b983, #178AFF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      
      .file-type-label {
        font-size: 12px;
        color: #606266;
        background: rgba(255, 255, 255, 0.8);
        padding: 2px 8px;
        border-radius: 10px;
      }
    }
  }
  
  .export-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #409EFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s;
    cursor: pointer;
    z-index: 2;
    
    &:hover {
      background: #66b1ff;
    }
    
    i {
      font-size: 16px;
    }
  }
}

// 添加表格视图相关样式
// ... existing styles ...
// 表格视图美化
.el-table {
  .file-name-cell {
    display: flex;
    align-items: center;
    
    .file-icon {
      font-size: 20px;
      margin-right: 8px;
      background: linear-gradient(135deg, #42b983, #178AFF);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    span {
      margin-right: 10px;
      font-weight: 500;
    }
    
    .el-tag {
      height: 20px;
      line-height: 18px;
    }
  }
  
  .text-warning {
    color: #E6A23C !important;
  }
  
  .text-danger {
    color: #F56C6C !important;
  }
}

// 空文件列表美化
.empty-file-list {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  
  .el-button {
    background: linear-gradient(135deg, #42b983, #178AFF);
    border: none;
    color: #fff;
    transition: all 0.3s;
    
    &:hover {
      background: linear-gradient(135deg, #36a776, #1077e8);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }
}

// 修复工具栏按钮样式
.tool-bar {
  .tool-group {
    .el-button {
      &:hover {
        color: #178AFF;
      }
      
      &.active {
        color: #178AFF;
        background-color: rgba(23, 138, 255, 0.1);
      }
    }
  }
}
// ... existing styles ...
</style>